<template>
  <div class="index_container">
    <!-- 头部盒子 -->
    <div class="header_box">
      <img class="logo" src="../assets/imgs/logo.png" alt="" />
      <div class="titlt_box">
        <div class="title">抽灌实验实时监测系统</div>
      </div>
    </div>
    <!-- 水井盒子区域 -->
    <div class="wells_box">
      <div class="start-btn">
        <img @click="changeStart" src="../assets/imgs/startex.png" alt="" />
      </div>
      <!-- 水泵数据 -->
      <div class="data-info">
        <img class="datalt" src="../assets/imgs/datalt.png" alt="" />
        <img class="datarb" src="../assets/imgs/datarb.png" alt="" />
        <div class="water-lev1">
          <p class="name">实时水位：</p>
          <p class="value">{{ pumpdata.waterlev1 }}m</p>
        </div>
        <div class="frequency">
          <p class="name">实时频率：</p>
          <p class="value">{{ pumpdata.frequency }}hz</p>
        </div>
        <div class="electricity">
          <p class="name">实时电流：</p>
          <p class="value">{{ pumpdata.electricity }}A</p>
        </div>
      </div>
      <!-- 水泵 -->
      <div class="water-sys">
        <img class="sys" src="../assets/imgs/watersys2.png" alt="" />
        <!-- 水泵遮罩 -->
        <div class="sysmask" v-if="!wateropen"></div>
        <!-- 井水1 -->
        <div class="all1">
          <div class="waterall" :class="waterHeight1"></div>
          <div class="water"></div>
        </div>
        <!-- 井水2 -->
        <div class="all2">
          <div class="waterall" :class="waterHeight2"></div>
          <div class="water"></div>
        </div>
        <!-- 井水3 -->
        <div class="all3">
          <div class="waterall" :class="waterHeight3"></div>
          <div class="water"></div>
        </div>
        <!-- 水流 -->
        <img
          v-if="wateropen && model"
          class="flow"
          src="../assets/imgs/flow.gif"
          alt=""
        />
        <img
          v-if="wateropen && !model"
          class="flow2"
          src="../assets/imgs/flow2.gif"
          alt=""
        />
        <!-- 流量计/温度计 -->
        <div class="flowmeter1 fmbg">
          <p>
            {{ pumpdata.flowmeter1 }} <span class="unit">m<sup>3</sup>/h</span>
          </p>
        </div>
        <div class="flowmeter2 fmbg">
          <p>{{ pumpdata.temperature }} <span class="unit">&#8451;</span></p>
        </div>
        <div class="flowmeter3 fmbg">
          <p>
            {{ pumpdata.flowmeter2 }} <span class="unit">m<sup>3</sup>/h</span>
          </p>
        </div>
        <div class="flowmeter4 fmbg">
          <p>
            {{ pumpdata.flowmeter3 }} <span class="unit">m<sup>3</sup>/h</span>
          </p>
        </div>
        <div class="waterlev2 watlev">
          <div class="border-img">
            <img class="datalt" src="../assets/imgs/datalt.png" alt="" />
            <img class="fmrb" src="../assets/imgs/fmrb.png" alt="" />
          </div>
          <!-- 中间水泵水位 -->
          <div class="flowmeterdata">
            <p class="name">实时水位：</p>
            <p class="value">{{ pumpdata.waterlev2 }}m</p>
          </div>
          <!-- <p class="flowmeterdata">
            实时水位:
            <span class="unit">{{ pumpdata.flowmeter3 }}m</span>
          </p> -->
        </div>
        <div class="waterlev3 watlev">
          <div class="border-img">
            <img class="datalt" src="../assets/imgs/datalt.png" alt="" />
            <img class="fmrb" src="../assets/imgs/fmrb.png" alt="" />
          </div>
          <!-- 最右边水泵水位 -->
          <div class="flowmeterdata">
            <p class="name">实时水位：</p>
            <p class="value">{{ pumpdata.waterlev3 }}m</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 数据统计盒子 -->
    <div class="statist_box">
      <div class="btn">
        <div class="device-box">
          <img
            v-if="online"
            class="device-online"
            src="../assets/imgs/online.png"
            alt=""
          />
          <img
            v-else
            class="device-online"
            src="../assets/imgs/outline.png"
            alt=""
          />
        </div>

        <div class="start-history">
          <div class="open-close" @click="changeOpen">
            <img
              v-if="status && !open"
              class="open"
              src="../assets/imgs/open.png"
              alt=""
            />
            <img
              v-if="status && open"
              class="close"
              src="../assets/imgs/close.png"
              alt=""
            />
            <img
              v-if="!status"
              class="close"
              src="../assets/imgs/losecontrol.png"
              alt=""
            />
          </div>
          <div class="serec">
            <img
              @click="recordHandle(0)"
              class="rechis"
              v-if="record == '1'"
              src="../assets/imgs/beginrec.png"
              alt=""
            />
            <img
              @click="recordHandle(1)"
              class="rechis"
              v-else
              src="../assets/imgs/stoprec.png"
              alt=""
            />
          </div>
          <!-- <div class="history" @click="changePage">
            <img class="historyimg" src="../assets/imgs/history.png" alt="" />
          </div> -->
        </div>
      </div>
      <div class="model">
        <div class="washWell">
          <div
            class="washWellModel"
            @click="changeModel(1)"
            :style="{ color: model == true ? '' : 'gray' }"
          >
            洗井模式
          </div>
          <div class="openTime" :style="{ color: model == true ? '' : 'gray' }">
            开启 <span> {{ nowStart }}</span
            >分钟
            <div class="aline">
              <input
                @blur="valHandle(modeldata.openTime)"
                v-model="modeldata.openTime"
                :disabled="!model"
                :style="{ color: model == true ? '' : 'gray' }"
                class="inputTime"
                type="text"
              />
            </div>
          </div>
          <div
            class="closeTime"
            :style="{ color: model == true ? '' : 'gray' }"
          >
            关闭<span> {{ nowClose }}</span
            >分钟
            <input
              @blur="valHandle(modeldata.closeTime)"
              v-model="modeldata.closeTime"
              :disabled="!model"
              :style="{ color: model == true ? '' : 'gray' }"
              class="inputTime"
              type="text"
            />
          </div>
          <div
            class="frequency"
            :style="{ color: model == true ? '' : 'gray' }"
          >
            频率<span> {{ nowWashhz }}</span
            >hz<input
              @blur="frevilHandle(modeldata.washhz)"
              v-model="modeldata.washhz"
              :style="{ color: model == true ? '' : 'gray' }"
              class="inputTime"
              type="text"
              :disabled="!model"
            />
          </div>
        </div>
        <div class="charvie">
          <div class="modleft">
            <div class="recharge">
              <div
                class="washWellModel"
                @click="changeModel(0)"
                :style="{ color: model == true ? 'gray' : '' }"
              >
                回灌模式
              </div>
              <div
                class="frequency"
                :style="{ color: model == true ? 'gray' : '' }"
              >
                频率
                <span> {{ nowRechargehz }}</span
                >hz
                <input
                  @blur="frevilHandle(modeldata.rechargehz)"
                  v-model="modeldata.rechargehz"
                  :disabled="model == 1 ? true : false"
                  :style="{ color: model == true ? 'gray' : '' }"
                  class="inputTime"
                  type="text"
                />
              </div>
              <div class="frequ" @click="submitHandle"></div>
              <!-- <div class="subbtn" @click="submitHandle">模式确认</div> -->
            </div>
            <div class="warning">
              <!-- <span class="warnSetting">报警设置:</span> -->
              <div class="historyimg" @click="changePage">
                历史记录
                <!-- <img class="historyimg" src="../assets/imgs/history.png" alt="" /> -->
              </div>
              <div class="historyimg" @click="changeManage">
                管理平台
                <!-- <img class="historyimg" src="../assets/imgs/history.png" alt="" /> -->
              </div>
              <div class="submit">
                <div class="parameter" @click="showPumpParmas = true"></div>
              </div>
            </div>
          </div>
          <div class="modright">
            <EZUIKit v-if="proId == 1583974770732179457" />
          </div>
          <!-- 关闭系统之后展示遮罩 -->
          <div class="mask" v-if="!status">
            <div class="topmask"></div>
            <div class="bottommask"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="pubpparmas_box" v-if="showPumpParmas">
      <div class="parmas">
        <div class="data">
          <div class="left">
            <span>品牌：{{ pumpPar.brand }}</span>
            <span>型号：{{ pumpPar.modelNumber }}</span>
            <span>转速：{{ pumpPar.rotateSpeed }}</span>
          </div>
          <div class="right">
            <span>功率：{{ pumpPar.rateOfWork }}</span>
            <span>扬程：{{ pumpPar.headOfDelivery }}</span>
            <span>日期：{{ pumpPar.time.substring(0, 10) }}</span>
          </div>
        </div>
        <div class="close" @click="showPumpParmas = false"></div>
      </div>
    </div>
    <!-- 密码验证弹框 -->
    <div class="pwd_container" v-if="showPwd">
      <div class="pwd_box">
        <img class="avator" src="../assets/imgs/pwduser.png" alt="" />
        <div class="text">
          <p>请输入密码</p>
          <p>确认您的身份</p>
        </div>
        <div class="input">
          <input v-model="value" type="password" />
        </div>
        <div class="submit" @click="subpwd">
          <img src="../assets/imgs/submitbtn.png" alt="" />
        </div>
        <div class="close" @click="showPwd = false"></div>
      </div>
    </div>
  </div>

  <!-- <span v-for="item in navList" :key="item.id" @click="changeNav(item)">
      {{ item.name }}
    </span>
    <router-view></router-view> -->
</template>

<script>
// import Pwd from '../components/pwd.vue'
import EZUIKit from '../components/video.vue'
import { getPumpData, getStart } from '../untils/api'
import md5 from 'js-md5'
export default {
  // 组件名称
  name: 'Index',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {
    EZUIKit
    // Pwd
  },
  // 组件状态值
  data () {
    return {
      rw: null,
      record: 0,
      start: 0,
      pumpdata: {
        waterlev1: 0,// 水泵1水位
        frequency: 0,// 水泵1频率
        electricity: 0,// 水泵1电流
        waterlev2: 0,// 水泵2水位
        waterlev3: 0,// 水泵3水位       
        flowmeter1: 0,// 流量计1
        flowmeter2: 0,// 流量计2
        flowmeter3: 0,// 流量计3
        temperature: 0,// 温度计
      },
      open: 0,//开关状态
      wateropen: 0,
      showPumpParmas: false,//水泵状态展示
      nowStart: 0,
      nowClose: 0,
      nowWashhz: 0,
      nowRechargehz: 0,
      modeldata: {
        //洗井模式参数
        openTime: null,//开始时长
        closeTime: null,//关闭时长
        washhz: null,//频率
        //回灌模式参数
        rechargehz: null,//频率
      },
      online: 1,
      model: 1,//true为洗井模式，false为回灌模式
      status: 1,//是否允许修改开关状态
      //ws请求参数
      path: "ws://47.105.58.2:18097/",
      socket: "",
      pumpPar: [],
      showPwd: false,
      value: '',
      proId: null,
    }
  },
  // 组件初始化
  created () {
    // axios获取水泵数据
    this.getIndexData()
    // 获取下半部分数据
  },
  // 组件实例挂载完毕
  mounted () {
    // this.getdataax()
    this.getdataws()
    this.getInitData()
    window.sessionStorage.setItem("login", "true")
    this.rw = sessionStorage.getItem('rw')
    this.proId = sessionStorage.getItem('proId')
  },
  // 计算属性
  computed: {
    waterHeight1 () {
      if (this.pumpdata.waterlev2 <= 40) {
        return 'h40'
      } else if (this.pumpdata.waterlev2 <= 42) {
        return 'h42'
      } else if (this.pumpdata.waterlev2 <= 44) {
        return 'h44'
      } else if (this.pumpdata.waterlev2 <= 46) {
        return 'h46'
      } else if (this.pumpdata.waterlev2 <= 48) {
        return 'h48'
      } else if (this.pumpdata.waterlev2 <= 50) {
        return 'h50'
      } else if (this.pumpdata.waterlev2 <= 52) {
        return 'h52'
      } else if (this.pumpdata.waterlev2 <= 54) {
        return 'h54'
      } else if (this.pumpdata.waterlev2 <= 56) {
        return 'h56'
      } else if (this.pumpdata.waterlev2 <= 58) {
        return 'h58'
      } else if (this.pumpdata.waterlev2 <= 60) {
        return 'h60'
      } else if (this.pumpdata.waterlev2 <= 62) {
        return 'h62'
      } else if (this.pumpdata.waterlev2 <= 64) {
        return 'h64'
      } else if (this.pumpdata.waterlev2 <= 66) {
        return 'h66'
      } else if (this.pumpdata.waterlev2 <= 68) {
        return 'h68'
      } else if (this.pumpdata.waterlev2 <= 70) {
        return 'h70'
      } else if (this.pumpdata.waterlev2 <= 72) {
        return 'h72'
      } else if (this.pumpdata.waterlev2 <= 74) {
        return 'h74'
      } else if (this.pumpdata.waterlev2 <= 76) {
        return 'h76'
      } else if (this.pumpdata.waterlev2 <= 78) {
        return 'h78'
      } else {
        return 'h80'
      }

    },
    waterHeight2 () {
      if (this.pumpdata.waterlev2 <= 50) {
        return 'h50'
      } else if (this.pumpdata.waterlev2 <= 52) {
        return 'h52'
      } else if (this.pumpdata.waterlev2 <= 54) {
        return 'h54'
      } else if (this.pumpdata.waterlev2 <= 56) {
        return 'h56'
      } else if (this.pumpdata.waterlev2 <= 58) {
        return 'h58'
      } else if (this.pumpdata.waterlev2 <= 60) {
        return 'h60'
      } else if (this.pumpdata.waterlev2 <= 62) {
        return 'h62'
      } else if (this.pumpdata.waterlev2 <= 64) {
        return 'h64'
      } else if (this.pumpdata.waterlev2 <= 66) {
        return 'h66'
      } else if (this.pumpdata.waterlev2 <= 68) {
        return 'h68'
      } else {
        return 'h70'
      }
    },
    waterHeight3 () {
      if (this.pumpdata.waterlev3 <= 50) {
        return 'h50'
      } else if (this.pumpdata.waterlev3 <= 52) {
        return 'h52'
      } else if (this.pumpdata.waterlev3 <= 54) {
        return 'h54'
      } else if (this.pumpdata.waterlev3 <= 56) {
        return 'h56'
      } else if (this.pumpdata.waterlev3 <= 58) {
        return 'h58'
      } else if (this.pumpdata.waterlev3 <= 60) {
        return 'h60'
      } else if (this.pumpdata.waterlev3 <= 62) {
        return 'h62'
      } else if (this.pumpdata.waterlev3 <= 64) {
        return 'h64'
      } else if (this.pumpdata.waterlev3 <= 66) {
        return 'h66'
      } else if (this.pumpdata.waterlev3 <= 68) {
        return 'h68'
      } else {
        return 'h70'
      }
    }
  },
  // 组件方法
  methods: {
    // 获取水井数据
    async getIndexData () {
      var userId = sessionStorage.getItem('userId')
      var projectId = sessionStorage.getItem('proId')
      var data = {
        userId: userId,
        projectId: projectId
      }
      const res = await getPumpData(data)
      //水泵1的数据
      this.pumpdata.waterlev1 = res.waterLevel || 0
      this.pumpdata.electricity = res.electricity || 0
      this.pumpdata.frequency = res.realTimeFrequency || 0
      this.pumpdata.flowmeter1 = res.wellFlow || 0
      //温度计
      this.pumpdata.temperature = res.temperature || 0
      //水泵2的数据
      this.pumpdata.waterlev2 = res.waterLevel1 || 0
      //水泵3的数据
      this.pumpdata.waterlev3 = res.waterLevel2 || 0
      //流量计2
      this.pumpdata.flowmeter2 = res.wellFlow1 || 0
      //流量计3
      this.pumpdata.flowmeter3 = res.wellFlow2 || 0
    },
    // 点击导航跳转
    changePage () {
      this.$router.push('/history')
    },
    changeManage () {
      var login = window.sessionStorage.getItem("login")
      if (this.rw == 1) {
        this.$message({
          type: 'info',
          message: '您没有当前操作的权限!'
        });
        return
      }
      if (!login) {
        // this.pwdDialogVisible = true
        this.showPwd = true
        return
      }
      window.open('http://47.105.58.2:18104/')
    },

    //开关状态处理事件
    changeOpen () {
      if (this.rw == 1) {
        this.$message({
          type: 'info',
          message: '您没有当前操作的权限!'
        });
        return
      }
      var login = window.sessionStorage.getItem("login")
      if (!login) {
        // this.pwdDialogVisible = true
        this.showPwd = true
        return
      }
      //  else {
      //   this.open = 1
      // }
      if (!this.status) return this.$message.error('PIC未允许远程操作')
      if (this.open == 1) {
        this.open = 0
      } else {
        if (this.model == 1) {

          // this.modeldata.washhz = this.limitHz(this.modeldata.washhz)
          // this.modeldata.openTime = this.limitTime(this.modeldata.openTime)
          // this.modeldata.closeTime = this.limitTime(this.modeldata.closeTime)
          this.nowStart = this.limitTime(this.nowStart)
          this.nowClose = this.limitTime(this.nowClose)
          this.nowWashhz = this.limitTime(this.nowWashhz)

          var hdmodel = 0
          this.changeWashData(hdmodel, this.nowStart, this.nowClose, this.nowWashhz)
        } else if (this.model == 0) {
          // this.modeldata.rechargehz = this.limitHz(this.modeldata.rechargehz)
          this.nowRechargehz = this.limitHz(this.nowRechargehz)
          var hdmodel = 1
          this.changeRecharge(hdmodel, this.nowRechargehz)
        }
        this.open = 1
      }
      this.changeStatus(String(this.open), String(this.status))
      // this.getInitData()
    },
    //验证格式
    check () {
      if (this.model == 1) {
        if (this.modeldata.openTime == null) {
          this.modeldata.openTime = this.nowStart
        }
        if (this.modeldata.closeTime == null) {
          this.modeldata.closeTime = this.nowClose

        }
        if (this.modeldata.washhz == null) {
          this.modeldata.washhz = this.nowWashhz

        }
      }
      var time = /^\+?((0|([1-9]+\d*))|((0\.\d+)|([1-9]+\d*\.\d+)))$/
      var hz = /^([3-4][0-9]|50)$/
      var time1 = time.test(this.modeldata.openTime)
      var time2 = time.test(this.modeldata.closeTime)
      var hz1 = hz.test(this.modeldata.washhz)
      var hz2 = hz.test(this.modeldata.rechargehz)
      //验证数据格式是否合法
      // 洗井模式
      if (this.model == 1) {
        if (!time1 || !time2 || !hz1) {
          return this.$message.error('时间不能为负数')
        } else {
          var hdmodel = 0
          this.changeWashData(hdmodel, this.modeldata.openTime, this.modeldata.closeTime, this.modeldata.washhz)
        }
      }
      //回灌模式
      if (this.model == 0) {
        if (!hz2) {
          return this.$message.error('频率范围应在30-50之间')
        } else {
          var hdmodel = 1
          this.changeRecharge(hdmodel, this.modeldata.rechargehz)
        }
      }
    },
    // changeOpen (state) {
    //   this.open = state
    // },
    //验证时间范围
    valHandle (time) {
      // var r = /^(0|[1-9]|[1-5][0-9]|60)$/ //1-60
      if (!time) return
      var r = /^\+?((0|([1-9]+\d*))|((0\.\d+)|([1-9]+\d*\.\d+)))$/  //非负数
      if (!r.test(time)) {
        this.$message.error('时间不能为负数')
      }
    },
    //验证频率范围
    frevilHandle (hz) {
      var r = /^([3-4][0-9]|50)$/
      if (!r.test(hz)) {
        this.$message.error('频率范围应为30-50hz')
      }
    },
    //提交事件
    submitHandle () {
      if (this.rw == 1) {
        this.$message({
          type: 'info',
          message: '您没有当前操作的权限!'
        });
        return
      }
      var login = window.sessionStorage.getItem("login")
      if (!login) {
        // this.pwdDialogVisible = true
        this.showPwd = true
        return
      }
      this.check()
      if (this.model == 1) {
        this.nowStart = this.modeldata.openTime
        this.nowClose = this.modeldata.closeTime
        this.nowWashhz = this.modeldata.washhz
      } else if (this.model == 0) {
        this.nowRechargehz = this.modeldata.rechargehz

      }
      //Todo...
      this.modeldata.openTime = null
      this.modeldata.closeTime = null
      this.modeldata.washhz = null
      this.modeldata.rechargehz = null
    },
    //改变系统模式
    changeModel (model) {

      if (this.rw == 1) {
        this.$message({
          type: 'info',
          message: '您没有当前操作的权限!'
        });
        return
      }
      var login = window.sessionStorage.getItem("login")
      if (!login) {
        // this.pwdDialogVisible = true
        return this.showPwd = true
      }
      this.model = model
      if (this.model == 1) {
        this.nowWashhz = this.limitHz(this.nowWashhz)
        this.nowStart = this.limitTime(this.nowStart)
        this.nowClose = this.limitTime(this.nowClose)
        var hdmodel = 0
        this.changeWashData(hdmodel, this.nowStart, this.nowClose, this.nowWashhz)
      } else if (this.model == 0) {
        this.nowRechargehz = this.limitHz(this.nowRechargehz)
        var hdmodel = 1
        this.changeRecharge(hdmodel, this.nowRechargehz)
      }
      // this.open = 1

    },
    //修改频率值
    limitHz (hz) {
      if (hz <= 30) {
        return 30
      } else if (hz >= 50) {
        return 50
      } else {
        return hz
      }
    },
    //修改时间值
    limitTime (time) {
      // if (time <= 0) {
      //   return 1
      // } else if (time >= 60) {
      //   return 60
      // } else {
      //   return time
      // }
      return time
    },
    //记录事件处理
    recordHandle (type) {
      if (this.rw == 1) {
        this.$message({
          type: 'info',
          message: '您没有当前操作的权限!'
        });
        return
      }
      // if (!this.status || !this.open) {
      //   return this.$message.error('请先打开设备!')
      // }
      var login = window.sessionStorage.getItem("login")
      if (!login) {
        // this.pwdDialogVisible = true
        return this.showPwd = true
      }
      this.record = type
      this.$axios({
        method: 'post',
        url: '/api/system/well/record',
        data: {
          record: type
        }
      })

    },

    //获取首页下半部分数据
    async getInitData () {
      const result = await this.$axios.post('/api/system/well/remoteControl')
      if (result.status !== 200) return
      this.pumpPar = result.data.data
      this.record = result.data.data.record
      this.status = Number(result.data.data.remoteControl)
      this.open = Number(result.data.data.status)
      this.model = result.data.data.modeSelection == '0' ? 1 : 0
      this.nowStart = result.data.data.imports
      this.nowClose = result.data.data.export
      this.nowWashhz = result.data.data.hz
      this.nowRechargehz = result.data.data.hz
    },
    //改变开关状态的请求处理
    changeStatus (open, status) {
      this.$axios.get(`/api/system/well/control?onOff=${open}&remoteControl=${status}`)
    },
    //修改洗井模式数据的请求处理
    changeWashData (modeSelection, on, off, hz) {
      this.$axios.get(`/api/system/well/control?modeSelection=${modeSelection}&on=${on}&off=${off}&hz=${hz}`)
    },
    //修改洗井模式数据的请求处理
    changeRecharge (modeSelection, hz) {
      this.$axios.get(`/api/system/well/control?modeSelection=${modeSelection}&hz=${hz}`)
    },
    // changeRecharge (modeSelection, hz) {
    //   this.$axios.get(`/api/system/well/control?modeSelection=${modeSelection}&hz=${hz}`)

    // },
    //axios获取数据
    async getdataax () {
      const result = await this.$axios.get('/api/system/well/pumpData')
      if (result.status !== 200) return

      var res = result.data.data
      if (!res.length) return


      //水泵1的数据
      this.pumpdata.waterlev1 = res[0].waterLevel || 0
      this.pumpdata.electricity = res[0].electricity || 0
      this.pumpdata.frequency = res[0].realTimeFrequency || 0
      this.pumpdata.flowmeter1 = res[0].wellFlow || 0
      //温度计
      this.pumpdata.temperature = res[0].temperature || 0
      //水泵2的数据
      this.pumpdata.waterlev2 = res[0].waterLevel1 || 0
      //水泵3的数据
      this.pumpdata.waterlev3 = res[0].waterLevel2 || 0
      //流量计2
      this.pumpdata.flowmeter2 = res[0].wellFlow1 || 0
      //流量计3
      this.pumpdata.flowmeter3 = res[0].wellFlow2 || 0

    },
    //ws获取数据
    getdataws () {
      if (typeof (WebSocket) === "undefined") {
        alert("您的浏览器不支持socket")
      } else {
        // 实例化socket
        this.socket = new WebSocket(this.path)
        // 监听socket连接
        this.socket.onopen = this.opennet
        // 监听socket错误信息
        this.socket.onerror = this.error
        // 监听socket消息
        this.socket.onmessage = this.getMessage
        // 监听socket关闭
        this.socket.onclose = this.close
      }
    },
    opennet: function () {
      console.log("socket连接成功")
    },
    error: function () {
      console.log("连接错误")
    },
    getMessage: function (msg) {
      const res = JSON.parse(msg.data)
      // console.log(123, res)
      if (res.equStatus == '0') {
        return this.online = res.equStatus
      }
      if (res.equStatus == '1') {
        return this.online = res.equStatus
      }

      //水泵1的数据
      this.pumpdata.waterlev1 = res.waterLevel
      this.pumpdata.electricity = res.electricity
      this.pumpdata.frequency = res.realTimeFrequency
      this.pumpdata.flowmeter1 = res.wellFlow
      //温度计
      this.pumpdata.temperature = res.temperature
      //水泵2的数据
      this.pumpdata.waterlev2 = res.rechargeWaterLevel
      // //水泵3的数据
      this.pumpdata.waterlev3 = res.rechargeWaterLevel2
      // //流量计2
      this.pumpdata.flowmeter2 = res.rechargewellFlow
      // //流量计3
      this.pumpdata.flowmeter3 = res.rechargewellFlow2
      // 开始时间
      this.nowStart = res.imports
      // 关闭时间
      this.nowClose = res.export
      //模式
      this.model = res.modeSelection == '1' ? 0 : 1
      //洗井频率
      this.nowWashhz = res.washInput
      //回灌频率
      this.nowRechargehz = res.frequencyInput
      //开关
      this.wateropen = res.onOff

      this.open = res.status
      //远程控制
      this.status = res.remoteControl == '1' ? 1 : 0
      //记录状态
      this.record = res.record


    },
    send: function () {
      this.socket.send(params)
    },
    close: function () {
      console.log("socket已经关闭")
    },
    async subpwd () {
      const res = await this.$axios({
        method: 'post',
        url: '/api/system/well/checkCommand',
        data: md5(this.value),
        headers: { "Content-Type": "text/plain" }
      })

      if (!this.value || res.data.code !== 0) {
        return this.$message.error("密码错误")
      }
      this.showPwd = false
      window.sessionStorage.setItem('login', true)
      this.open = 1
      this.value = ''
      //   this.$emit("updateShow", false)
      //   this.$emit('updateOpen', 1)
    },
    closePwd () {
      this.showPwd = false
    },
    // 开启、开始实验
    async changeStart () {
      var projectId = sessionStorage.getItem('proId')
      const res = await getStart({ projectId: projectId })
      if (res.code != 0) {
        this.$message.error("操作失败")
      }
    }
    //关闭密码验证框
    // updatePwdState (params) {
    //   this.showPwd = params[0]
    // }

  },

}
</script>

<style scoped lang='less'>
.index_container {
  height: 100%;
  width: 100%;
  display: block;
  // width: 100%;
  // height: 99.1%;
  // min-height: 800px;
  min-width: 800px;
  background-image: url(../assets/imgs/bgimg.png);
  background-size: cover;
  background-size: 100% 100%;
  position: relative;
  .logo {
    position: absolute;
    left: 0.3125rem /* 60/192 */;
    top: 0.182292rem /* 35/192 */;
    width: 0.494792rem /* 95/192 */;
    height: 0.598958rem /* 115/192 */;
    // margin-top: 0.026042rem /* 5/192 */;
  }
  .header_box {
    height: 10%;
    width: 6.697917rem /* 1286/192 */;
    background-image: url(../assets/imgs/headerimg.png);
    background-size: cover;
    background-size: 100% 100%;
    min-height: 80px;
    display: flex;
    justify-content: space-between;
    // text-align: center;
    // background-color: red;
    margin: 0 auto;
    .titlt_box {
      height: 58%;
      line-height: 0.3125rem /* 60/192 */;
      width: 1.979167rem /* 380/192 */;
      margin: 0 auto;
      padding-top: 0.010417rem /* 2/192 */;
      box-sizing: border-box;

      .title {
        font-size: 0.166667rem /* 32/192 */;
        // width: 352px;
        // height: 40px;
        // font-size: 42px;
        font-family: SimHei;
        text-align: center;
        // font-weight: 400;
        color: #5df5f9;
        // line-height: 13px;
      }
    }
  }
  .wells_box {
    height: 46%;
    width: 88%;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    .start-btn {
      position: absolute;
      top: 0.416667rem /* 80/192 */;
      left: 0.260417rem /* 50/192 */;
      img {
        width: 1.03125rem /* 198/192 */;
        height: 0.432292rem /* 83/192 */;
      }
    }
    .data-info {
      width: 1.375rem /* 264/192 */;
      height: 1.020833rem /* 196/192 */;
      min-height: 100px;
      min-width: 150px;
      margin-top: 0.78125rem /* 150/192 */;
      border: 0.005208rem /* 1/192 */ solid #20bcfc;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      position: relative;
      .datalt {
        position: absolute;
        top: -0.010417rem /* 2/192 */;
        left: -0.010417rem /* 2/192 */;
        height: 25%;
      }
      .datarb {
        position: absolute;
        right: -0.020833rem /* 4/192 */;
        bottom: -0.020833rem /* 4/192 */;
        height: 50%;
      }
      .water-lev1,
      .frequency,
      .electricity {
        display: flex;
        justify-content: space-around;
        align-items: center;
        .name {
          display: inline-block;
          line-height: 0.208333rem /* 40/192 */;
          font-size: 0.104167rem /* 20/192 */;
          color: #23cefd;
        }
        .value {
          display: inline-block;
          font-size: 0.15625rem /* 30/192 */;
          color: #ffffff;
          background: #3596bd;
          width: 0.598958rem /* 115/192 */;
          line-height: 0.1875rem /* 36/192 */;
          text-align: center;
          border: 0.010417rem /* 2/192 */ solid #8ce5f4;
          box-shadow: 0 0 0.026042rem /* 5/192 */ 0.005208rem /* 1/192 */
            rgba(214, 221, 224, 0.83);
          // box-shadow: 0 0 0.260417rem /* 50/192 */ 1px rgba(4, 73, 106, 0.83);
          box-sizing: border-box;
          // margin-top: 5px;
        }
      }
    }
    .water-sys {
      position: relative;
      .sysmask {
        position: absolute;
        top: 1.380208rem /* 265/192 */;
        left: 0.182292rem /* 35/192 */;
        height: 0.416667rem /* 80/192 */;
        width: 0.416667rem /* 80/192 */;
        background-color: red;
        border-radius: 0.104167rem /* 20/192 */;
        opacity: 0.7;
      }
      .h40 {
        height: 0.260417rem /* 50/192 */;
      }
      .h42 {
        height: 0.28125rem /* 54/192 */;
      }
      .h44 {
        height: 0.302083rem /* 58/192 */;
      }
      .h46 {
        height: 0.322917rem /* 62/192 */;
      }
      .h48 {
        height: 0.34375rem /* 66/192 */;
      }
      .h50 {
        height: 0.364583rem /* 70/192 */;
      }
      .h52 {
        height: 0.385417rem /* 74/192 */;
      }
      .h54 {
        height: 0.40625rem /* 78/192 */;
      }
      .h56 {
        height: 0.427083rem /* 82/192 */;
      }
      .h58 {
        height: 0.447917rem /* 86/192 */;
      }
      .h60 {
        height: 0.46875rem /* 90/192 */;
      }
      .h62 {
        height: 0.489583rem /* 94/192 */;
      }
      .h64 {
        height: 0.510417rem /* 98/192 */;
      }
      .h66 {
        height: 0.53125rem /* 102/192 */;
      }
      .h68 {
        height: 0.552083rem /* 106/192 */;
      }
      .h70 {
        height: 0.572917rem /* 110/192 */;
      }
      .h72 {
        height: 0.59375rem /* 114/192 */;
      }
      .h74 {
        height: 0.614583rem /* 118/192 */;
      }
      .h76 {
        height: 0.635417rem /* 122/192 */;
      }
      .h78 {
        height: 0.65625rem /* 126/192 */;
      }
      .h80 {
        height: 0.677083rem /* 130/192 */;
      }

      .water {
        background-color: #00a0e9;
        width: 0.744792rem /* 143/192 */;
        height: 0.171875rem /* 33/192 */;
        min-width: 42px;
        border-bottom-left-radius: 50%;
        border-bottom-right-radius: 50%;
        opacity: 0.4;
        overflow: hidden;
      }
      .all1 {
        position: absolute;
        bottom: 0.041667rem /* 8/192 */;
        left: 0.020833rem /* 4/192 */;
      }
      .all2 {
        position: absolute;
        bottom: 0.041667rem /* 8/192 */;
        left: 3.864583rem /* 742/192 */;
      }
      .all3 {
        position: absolute;
        bottom: 0.041667rem /* 8/192 */;
        left: 6.34375rem /* 1218/192 */;
      }
      .waterall {
        width: 0.744792rem /* 143/192 */;
        background-color: #00a0e9;
        min-width: 42px;
        // height: 100px;
        opacity: 0.4;
      }

      .sys {
        width: 7.208333rem /* 1384/192 */;
        height: 2.239583rem /* 430/192 */;
        // min-height: 200px;
        min-width: 400px;
      }
      .flow {
        position: absolute;
        top: 0.234375rem /* 45/192 */;
        left: 0.34375rem /* 66/192 */;
        height: 1.1875rem /* 228/192 */;
        width: 6.854167rem /* 1316/192 */;
        opacity: 0.8;
      }
      .flow2 {
        position: absolute;
        top: 0.234375rem /* 45/192 */;
        left: 0.34375rem /* 66/192 */;
        height: 1.1875rem /* 228/192 */;
        width: 6.942708rem /* 1333/192 */;
        opacity: 0.8;
      }
      .fmbg {
        width: 0.729167rem /* 140/192 */;
        height: 0.3125rem /* 60/192 */;
        background-image: url(../assets/imgs/flowmeterbg.png);
        background-size: cover;
        background-size: 100% 100%;
        font-size: 0.208333rem /* 40/192 */;
        color: #1eb0fc;
        p {
          text-align: center;
          .unit {
            display: inline-block;
            font-size: 0.114583rem /* 22/192 */;
          }
        }
      }
      .flowmeter1 {
        position: absolute;
        left: 0.645833rem /* 124/192 */;
        top: 0.541667rem /* 104/192 */;
      }
      .flowmeter2 {
        position: absolute;
        top: 0.541667rem /* 104/192 */;
        left: 1.916667rem /* 368/192 */;
      }
      .flowmeter3 {
        position: absolute;
        top: 0.541667rem /* 104/192 */;
        left: 3.229167rem /* 620/192 */;
      }
      .flowmeter4 {
        position: absolute;
        top: 0.541667rem /* 104/192 */;
        left: 5.729167rem /* 1100/192 */;
      }
      .watlev {
        width: 1.135417rem /* 218/192 */;
        height: 0.354167rem /* 68/192 */;
        border: 0.005208rem /* 1/192 */ solid #20bcfc;
        position: absolute;
        .border-img {
          width: 100%;
          height: 100%;
          position: absolute;
          .datalt {
            position: absolute;
            top: 0;
            left: -0.026042rem /* 5/192 */;
            height: 100%;
          }
          .fmrb {
            position: absolute;
            right: -0.026042rem /* 5/192 */;
            bottom: -0.026042rem /* 5/192 */;
            height: 110%;
          }
        }
        .flowmeterdata {
          height: 0.354167rem /* 68/192 */;
          width: 1.09375rem /* 210/192 */;
          display: flex;
          justify-content: space-around;
          align-items: center;
          .name {
            display: inline-block;
            line-height: 0.208333rem /* 40/192 */;
            font-size: 0.104167rem /* 20/192 */;
            color: #23cefd;
          }
          .value {
            display: inline-block;
            font-size: 0.15625rem /* 30/192 */;
            color: #ffffff;
            background: #3596bd;
            width: 0.494792rem /* 95/192 */;
            line-height: 0.1875rem /* 36/192 */;
            text-align: center;
            border: 0.010417rem /* 2/192 */ solid #8ce5f4;
            box-shadow: 0 0 0.026042rem /* 5/192 */ 0.005208rem /* 1/192 */
              rgba(214, 221, 224, 0.83);
            // box-shadow: 0 0 0.260417rem /* 50/192 */ 1px rgba(4, 73, 106, 0.83);
            box-sizing: border-box;
            // margin-top: 5px;
          }
        }
        .flowmeterdata {
          line-height: 0.354167rem; /* 68/192 */
          text-align: center;
          color: #23cefd;
          .unit {
            font-size: 30px;
            color: white;
          }
        }
      }
      .waterlev2 {
        top: 1.333333rem /* 256/192 */;
        left: 2.625rem /* 504/192 */;
      }
      .waterlev3 {
        top: 1.333333rem /* 256/192 */;
        left: 5.104167rem /* 980/192 */;
      }
    }
  }
  .statist_box {
    height: 44%;
    width: 88%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .btn {
      width: 1.822917rem /* 350/192 */;
      height: 1.958333rem /* 376/192 */;
      margin-left: 0.078125rem /* 15/192 */;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
      align-items: center;
      .device-box {
        width: 1.666667rem /* 320/192 */;
        height: 0.625rem /* 120/192 */;
        .device-online {
          width: 100%;
          height: 100%;
        }
      }
      .start-history {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .open-close {
        width: 0.807292rem /* 155/192 */;
        height: 0.911458rem /* 175/192 */;
        &:hover {
          cursor: pointer;
        }
        .open,
        .close {
          width: 100%;
          height: 100%;
        }
      }
      .serec {
        width: 0.9375rem /* 180/192 */;
        height: 0.625rem /* 120/192 */;

        .rechis {
          width: 100%;
          height: 100%;
          &:hover {
            cursor: pointer;
          }
        }
      }
      // .historyimg {
      //   width: 1.09375rem /* 210/192 */;
      //   height: 0.572917rem /* 110/192 */;
      //   &:hover {
      //     cursor: pointer;
      //   }
      // }
    }
    .model {
      width: 6.770833rem /* 1300/192 */;
      height: 1.958333rem /* 376/192 */;
      background-image: url(../assets/imgs/historyimg.png);
      background-size: cover;
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      position: relative;
      .charvie {
        width: 96%;
        height: 1.302083rem /* 250/192 */;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
        box-sizing: border-box;
        padding-left: 0.177083rem /* 34/192 */;
        .modleft {
          width: 65%;
          height: 100%;
          display: flex;
          justify-content: space-around;
          flex-direction: column;
          margin-right: 0.104167rem /* 20/192 */;
        }
        .modright {
          z-index: 9;
          width: 35%;
          height: 100%;
        }
      }
      .mask {
        width: 6.697917rem /* 1286/192 */;
        height: 1.354167rem /* 260/192 */;
        position: absolute;
        top: 0;
        left: 0.03125rem /* 6/192 */;
        .topmask {
          height: 0.520833rem /* 100/192 */;
          width: 100%;
          background-color: rgb(196, 192, 192);
          opacity: 0.4;
        }
        .bottommask {
          width: 50%;
          height: 0.729167rem /* 140/192 */;
          background-color: rgb(196, 192, 192);
          opacity: 0.4;
        }
        // background-color: rgb(196, 192, 192);
        // opacity: 0.4;
      }
      .washWellModel {
        width: 1.03125rem /* 198/192 */;
        line-height: 0.4375rem /* 84/192 */;
        text-align: center;
        color: #2fecff;
        font-size: 0.15625rem /* 30/192 */;
        background-image: url(../assets/imgs/waterlevbg.png);
        background-size: cover;
        background-size: 100% 100%;
        &:hover {
          cursor: pointer;
        }
      }
      .inputTime {
        width: 0.260417rem /* 50/192 */;
        height: 0.208333rem /* 40/192 */;
        line-height: 0.208333rem /* 40/192 */;
        font-size: 0.135417rem /* 26/192 */;
        text-align: center;
        padding-top: 0.015625rem /* 3/192 */;
        padding-right: 0.020833rem /* 4/192 */;
        color: black;
        outline: none; // 获得焦点不显示边框颜色
        border: 0.010417rem /* 2/192 */ solid #8ce5f4;
        box-shadow: 0 0 0.026042rem /* 5/192 */ 0.005208rem /* 1/192 */
          rgba(214, 221, 224, 0.83);
        box-sizing: border-box;
        background-color: #44a3c8;
        margin: 0 0.052083rem /* 10/192 */;
      }

      .washWell {
        height: 0.4375rem /* 84/192 */;
        width: 90%;
        margin: 0 auto;
      }
      .washWell {
        background-size: 100% 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        .washmask {
          position: absolute;
          right: 0;
          top: 0;
          height: 100%;
          width: 75%;
          background-color: rgb(196, 192, 192);
          opacity: 0.4;
        }
        .openTime,
        .closeTime,
        .frequency {
          font-size: 0.15625rem /* 30/192 */;
          color: #23cefd;
          // width: 1.03125rem /* 198/192 */;
          .aline {
            display: inline-block;
            .content {
              display: flex;
              justify-content: space-around;
              flex-direction: column;
              align-items: center;
            }
          }
        }
      }
      .recharge {
        font-size: 0.15625rem /* 30/192 */;
        color: #23cefd;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        .subbtn {
          width: 1.03125rem /* 198/192 */;
          height: 0.4375rem /* 84/192 */;
          line-height: 0.4375rem /* 84/192 */;
          text-align: center;
          color: #23cefd;
          font-weight: bold;
          font-size: 0.15625rem /* 30/192 */;
          background-image: url(../assets/imgs/waterlevbg.png);
          background-size: cover;
          background-size: 100% 100%;
          &:hover {
            cursor: pointer;
          }
        }
        .rechargemask {
          position: absolute;
          top: 0;
          right: 0;
          height: 100%;
          width: 75%;
          background-color: rgb(196, 192, 192);
          opacity: 0.4;
        }

        .frequ {
          width: 0.78125rem /* 150/192 */;
          height: 0.364583rem /* 70/192 */;
          // line-height: 0.3125rem /* 60/192 */;
          background-image: url(../assets/imgs/submit.png);
          background-size: 100% 100%;
          &:hover {
            cursor: pointer;
          }
        }
      }
      .warning {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .historyimg {
          background-image: url(../assets/imgs/waterlevbg.png);
          background-size: 100% 100%;
          width: 1.03125rem /* 198/192 */;
          height: 0.4375rem /* 84/192 */;
          line-height: 0.4375rem /* 84/192 */;
          text-align: center;
          color: #2fecff;
          font-size: 0.15625rem /* 30/192 */;
          &:hover {
            cursor: pointer;
          }
        }
        // .warnSetting {
        //   display: inline-block;
        //   line-height: 0.4375rem /* 84/192 */;
        //   width: 1.03125rem /* 198/192 */;
        //   text-align: center;
        //   font-size: 0.15625rem /* 30/192 */;
        //   color: #23cefd;
        // }
        .submit {
          width: 1.291667rem /* 248/192 */;
          height: 0.4375rem /* 84/192 */;
          display: flex;
          justify-content: flex-end;
          align-items: center;

          .parameter {
            width: 1.291667rem /* 248/192 */;
            height: 0.432292rem /* 83/192 */;
            background-image: url(../assets/imgs/parameter.png);
            background-size: cover;
            background-size: 100% 100%;
            &:hover {
              cursor: pointer;
            }
          }
        }
      }
    }
  }
  .pubpparmas_box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #03070c;
    opacity: 0.8;
    .parmas {
      position: absolute;
      top: 25%;
      left: 22%;
      width: 5.729167rem /* 1100/192 */;
      height: 2.239583rem /* 430/192 */;
      background-image: url(../assets/imgs/pumpparmas.png);
      margin: auto;
      background-size: 100% 100%;
      padding-top: 100px;
      box-sizing: border-box;
      // opacity: 1;
      // z-index: 999;
      .data {
        width: 4.166667rem /* 800/192 */;
        height: 1.041667rem /* 200/192 */;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
        align-items: center;
        span {
          display: block;
          font-size: 0.145833rem /* 28/192 */;
          color: #23cefd;
          line-height: 0.260417rem /* 50/192 */;
        }
      }
      .close {
        height: 0.208333rem /* 40/192 */;
        width: 0.208333rem /* 40/192 */;
        position: absolute;
        right: 0.229167rem /* 44/192 */;
        top: 0.15625rem /* 30/192 */;
        opacity: 1;
        &:hover {
          cursor: pointer;
        }
      }
    }
  }
  .pwd_box {
    position: absolute;
    top: 0;
    left: 0;
  }
  .pwd_container {
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.8;
    position: absolute;
    top: 0;
    left: 0;
    .pwd_box {
      position: absolute;
      top: 25%;
      left: 40%;
      width: 1.833333rem /* 352/192 */;
      height: 2.458333rem /* 472/192 */;
      background-image: url(../assets/imgs/pwdbor.png);
      background-size: 100% 100%;
      box-sizing: border-box;
      padding-top: 0.3125rem /* 60/192 */;
      display: flex;
      justify-content: flex-start;
      flex-direction: column;
      align-items: center;
      .avator {
        width: 0.9375rem /* 180/192 */;
        height: 0.9375rem /* 180/192 */;
        display: block;
      }
      .text {
        p {
          margin: 0;
          padding: 0;
          color: #23cefd;
          font-size: 0.125rem /* 24/192 */;
          text-align: center;
          margin-bottom: 0.052083rem /* 10/192 */;
        }
      }
      input {
        width: 1.041667rem /* 200/192 */;
        height: 0.15625rem /* 30/192 */;
        margin-bottom: 0.104167rem /* 20/192 */;
        font-size: 0.104167rem /* 20/192 */;
        background: #70bfe6;
        outline: none;
        border: 0;
        &:focus {
          outline: none;
        }
      }
      .close {
        position: absolute;
        width: 0.21875rem /* 42/192 */;
        height: 0.21875rem /* 42/192 */;
        right: 0.166667rem /* 32/192 */;
        top: 0.203125rem /* 39/192 */;
        background-color: #fff;
        opacity: 0;
      }
    }
  }
}
.modelcolor {
  color: gray;
}
</style>
